<template>
	<view>
		<u-navbar back-text="返回" title="订单详情"></u-navbar>
		<u-toast ref="uToast" />
		<u-modal v-model="recMesShow" @confirm="receiving" show-cancel-button=true content="您确定已经收到货,并且验收完成了吗?"></u-modal>
		<u-modal v-model="refMesShow" @confirm="refund" show-cancel-button=true content="美好的事物都值得等待,确认退款吗?"></u-modal>
		
		<!--步骤条区域-->
		<view class="bg-white padding solid-top" v-if="basics != 4">
			<!--步骤条-->
			<view class="cu-steps" v-if="basics!==-1&&orderData.status!==10">
				<block v-for="(item,index) in basicsList" :key="index">
					<view class="cu-item" :class="index>basics?'':'select'">
						<view class="icon-view" v-if="index>basics">
							<text class="text-red" :class="'cuIcon-' + item.cuIcon"></text>
						</view>
						<view class="bg-red icon-view" v-else>
							<text :class="'cuIcon-' + item.cuIcon"></text>
						</view>
						<view class="text-sm text-black" v-if="index>basics">{{item.name}}</view>
						<view class="text-sm text-black" v-else>{{item.name_s}}</view>
					</view>
				</block>
			</view>
			
			<!--提示-->
			<view class="text-sm text-center margin-top" v-if="basics == -1">
				<view class="text-black">订单已<text class="text-red">关闭</text></view>
	
			</view>
		
			<view class="text-sm text-center margin-top" v-if="basics == 0">
				<view class="text-black">拍下成功，待买家支付。</view>
				<view class="text-black">
					<text class="text-red">30分</text>
					<text>钟内未支付，订单将自动关闭。</text>
				</view>
			</view>
			<view class="text-sm text-center margin-top" v-if="basics == 1">
				<view class="text-black">支付成功，待卖家发货.</view>
			</view>
			<view class="text-sm text-center margin-top" v-if="basics == 2">
				<view class="text-black">已发货，7天后将自动收货.</view>
			</view>
			<view class="text-sm text-center margin-top" v-if="basics == 3">
				<view class="text-black">已收货,待评价。</view>
				<!-- <view class="text-black">
					<text class="text-red">9天23小时57分</text>
					<text>后将自动确认收货</text>
				</view> -->
			</view>
		</view>
		
		<!--状态图标-->
		<view class="bg-white padding solid-top text-center zaiui-status-img-view" v-if="basics == 4 && !cancel">
			<view class="are-img-view" @tap="cancel = true">
				<image class="are-img" src="/static/zaiui/img/are.png" mode="widthFix"/>
			</view>
			<view class="text-sm text-black">交易成功，待发表评价</view>
		</view>
		
		<!--状态图标-->
		<view class="bg-white padding solid-top text-center zaiui-status-img-view" v-if="basics == 4 && cancel">
			<view class="are-img-view" @tap="cancel = false">
				<image class="are-img" src="/static/zaiui/img/arg.png" mode="widthFix"/>
			</view>
			<view class="text-sm text-black">订单已取消</view>
		</view>
		<view class="bg-white padding solid-top text-center zaiui-status-img-view" v-if="orderData.status == 10">
			<view class="are-img-view" @tap="cancel = false">
				<image class="are-img" src="/static/zaiui/img/arg.png" mode="widthFix"/>
			</view>
			<view class="text-sm text-black">订单已退款,您可以查看售后</view>
		</view>
		<!--广告区域-->
		<view class="bg-white zaiui-card-box" v-if="basics == 0">
			<view class="zaiui-card-view zaiui-goods-ad-view">
				<view class="cu-avatar radius lg">
					<image style="height: 100%;" src="../../static/bankcard.png"></image>
				</view>
				<view class="goods-info-view">
					<text class="cu-tag bg-gradual-pink">一点优惠</text>
					<view class="text-black">银行卡支付</view>
					<view class="text-sm">
						<text>最高立减</text>
						<text class="text-red text-xl">200元</text>
					</view>
				</view>
				<view class="goods-btn-view">
					<button class="cu-btn bg-red radius sm">立即绑卡</button>
				</view>
			</view>
		</view>
		
		<!--物流信息-->
		<view class="bg-white zaiui-card-box" >
			<view class="zaiui-card-view zaiui-address-view">
				<view class="text-lg text-bold text-black">收货地址</view>
				<view class="solid-line"></view>
				<view class="cu-list menu-avatar" v-if="basics != -1" @click="changeAddr()">
					<view class="cu-item">
						<view class="bg-grey icon-view">
							<text class="cuIcon-locationfill"/>
						</view>
						<view class="content">
							<view class="text-black">
								<text>{{orderData.address}}</text>
								
							</view>
							<view class="text-gray text-sm flex">
								<view class="text-cut">{{orderData.consignee}}</view>
								<text class="margin-left">{{orderData.phone}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="cu-list menu-avatar" v-if="basics == -1">
					<view class="cu-item">
						<view class="bg-grey icon-view">
							<text class="cuIcon-locationfill"/>
						</view>
						<view class="content">
							<view class="text-black">
								<text>{{orderData.address}}</text>
								
							</view>
							<view class="text-gray text-sm flex">
								<view class="text-cut">{{orderData.consignee}}</view>
								<text class="margin-left">{{orderData.phone}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!--商品信息-->
		<view class="bg-white zaiui-card-box">
			<view class="zaiui-card-view zaiui-shop-view">
				
				<view class="shop-info-view" >
					<view class="cu-avatar round sm" >
						<image style="height: 100%;border-radius: 50%;" :src="orderShop.shopAvatar">
						<image class="v-icon" src="/static/zaiui/img/v.png" style="height: 18rpx;" lazy-load mode="widthFix" v-if="orderShop.shopType===0"/>
					</view>
					<view class="text-black text-bold text-lg title-view" style="font-size: 28rpx;">{{orderShop.shopName}}</view>
				</view>
				
				<view class="goods-list-view" style="margin-top: 30rpx;" v-for="(data,index) in orderItems" :key="index">
					<view class="cu-avatar radius">
						<image style="height: 100%;" :src="data.skuImage"></image>
					</view>
					<view class="goods-info-view">
						<view class="text-black text-cut name">{{data.spuTitle}}</view>
						<view class="text-gray text-sm text-cut introduce" style="margin-top: 10rpx;">{{data.attrValue}}</view>
				
						<view class="text-price text-red text-lg" style="margin-top: 40rpx;">{{data.skuPrice}}<text v-if="data.spuPostage>0" style="font-size: 18rpx;"> + 运费 {{data.spuPostage}}</text></view>
						
						<view style="margin-right: 10rpx;float: right;margin-top: -30rpx;" >
							x{{data.skuCount}}
						</view>
					</view>
					
					
				</view>
				
				
			</view>
		</view>
		
		<!--商品金额-->
		<view class="bg-white zaiui-card-box">
			<view class="zaiui-card-view zaiui-price-view">
				<view class="text-black title-view">
					<view class="title">商品总额</view>
					<view class="text-right">
						<text class="text-price">{{orderData.initialPrice}}</text>
					</view>
				</view>
				<view class="text-black title-view">
					<view class="title">运费</view>
					<view class="text-right">
						<text class="margin-right-xs">+</text>
						<text class="text-price">{{orderData.orderPostage}}</text>
					</view>
				</view>
				<view class="text-black title-view">
					<view class="title">优惠活动</view>
					<view class="text-right">
						<text class="margin-right-xs">-</text>
						<text class="text-price">{{orderData.deratePrice}}</text>
					</view>
				</view>
				<view class="text-black text-bold title-right-view">
					<text class="margin-right-xs">应付款：</text>
					<text class="text-price">{{orderData.finalPrice}}</text>
				</view>
				
				<view class="solid-line"></view>		
				<view class="text-center text-black">
					<button class="cu-btn bg-grey" >联系客服</button>
					<button v-if="orderData.status==3" class="cu-btn bg-grey" style="margin-left: 30rpx;" @click="toAfterSale">申请退款</button>
					<button v-if="orderData.status>10&&orderData.status<20" class="cu-btn bg-grey" @tap="toAfterDetail()" style="margin-left: 30rpx;">售后详情</button>
					
				</view>
				<view class="solid-line"></view>
				<view class="text-center text-black">
					
				</view>
								
			</view>
		</view>
		
		<!--订单信息-->
		<view class="bg-white zaiui-card-box">
			<view class="zaiui-card-view zaiui-order-view">
				<view class="text-lg text-bold text-black">订单信息</view>
				<view class="solid-line"></view>
				<view class="text-black title-view">
					<view class="title">订单编号</view>
					<view class="text-right">
						<text class="margin-right-xs">{{orderData.id}}</text>
						<button class="cu-btn sm line-black">复制</button>
					</view>
				</view>
				<view v-if="orderData.status==3" class="text-black title-view">
					<view class="title">物流单号</view>
					<view class="text-right">
						<text class="margin-right-xs">{{orderData.logistics}}</text>
						<button class="cu-btn sm line-black">复制</button>
					</view>
				</view>
				<view v-if="orderData.status!==1&&orderData.status!==0" class="text-black title-view">
					<view class="title">支付方式</view>
					<view class="text-right" style="display: flex;padding-left: 0;">
						<view style="display:flex;margin-left:auto;">
						<view class="bankIcon" :class="['icon-'+orderData.bankType]"></view>
						<text style="margin-left: 10rpx;" class="way-text">{{bankTypeMap.get(orderData.bankType)}}{{orderData.bankCard===-1?'':'('+orderData.bankCard+')'}}</text>
					</view></view>
				</view>
				<view v-else-if="orderData.status!==0" class="text-black title-view" @click="showCardBox">
					<view class="title">支付方式</view>
					<view class="text-right" style="display: flex;padding-left: 0;">
						<view style="display:flex;margin-left:auto;">
							
						
						<view class="bankIcon" :class="['icon-'+selectedPayWay.bankType]"></view>
						<text style="margin-left: 10rpx;" class="way-text">{{bankTypeMap.get(selectedPayWay.bankType)}}{{selectedPayWay.bankCard===undefined?'':'('+selectedPayWay.bankCard+')'}}</text>
					</view></view>
				</view>
				
				<view class="text-black title-view">
					<view class="title">下单时间</view>
					<view class="text-right">
						<text>{{orderData.createTime}}</text>
					</view>
				</view>
				<view class="text-black title-view" v-if="basics > 1">
					<view class="title">支付时间</view>
					<view class="text-right">
						<text>{{orderData.payTime}}</text>
					</view>
				</view>
				<view class="text-black title-view" v-if="basics > 2">
					<view class="title">发货时间</view>
					<view class="text-right">
						<text>{{orderData.deliverTime}}</text>
					</view>
				</view>
				
				<view class="text-black title-view" v-if="basics > 3">
					<view class="title">完成时间</view>
					<view class="text-right">
						<text>{{orderData.finalTime}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="bg-white zaiui-card-hight-box"/>
		
		
		<!--底部-->
		<view class="foot-hight-view"/>
		
		<view class="bg-white zaiui-footer-fixed zaiui-foot-padding-bottom" v-if="basics == -1">
			<view class="safe-bottom">
				<button class="cu-btn line-black radius" @click="delOrder">删除订单</button>
						
			</view>
		
		</view>
		<view class="bg-white zaiui-footer-fixed zaiui-foot-padding-bottom" v-if="basics == 0">
			<view class="safe-bottom">
					<button class="cu-btn line-black radius">取消订单</button>
					<button class="cu-btn bg-red" @click="showKeyBox">确认支付</button>
			</view>
			
		</view>
		
		<view class="bg-white zaiui-footer-fixed zaiui-foot-padding-bottom" v-if="basics == 1">
			<view class="safe-bottom">
					<button class="cu-btn line-black radius" @click="refundSure()">申请退款</button>
					<button class="cu-btn bg-red">提醒发货</button>
			</view>
		
		</view>
		
	
		
		<view class="bg-white zaiui-footer-fixed zaiui-foot-padding-bottom" v-if="basics == 2">
			<view class="safe-bottom">
				<button class="cu-btn line-black radius" @click="toAfterSale">申请退款</button>
				<button class="cu-btn bg-red" @tap="receivingSure()">确认收货</button>
			</view>
			
			
		</view>
		
		<view class="bg-white zaiui-footer-fixed zaiui-foot-padding-bottom" v-if="basics == -2">
			<view class="safe-bottom">
				<button v-if="orderData.status!=10" class="cu-btn line-black radius" @click="afterCancel">取消售后</button>
				<button class="cu-btn bg-red" @tap="toAfterDetail()">售后详情</button>
			</view>

		</view>
		
		
		<view class="bg-white zaiui-footer-fixed zaiui-foot-padding-bottom" v-if="basics == 4">
			<view class="safe-bottom">
					<button class="cu-btn line-black radius" @tap="appraiseTap">发表评价</button>
					<button class="cu-btn bg-red">查看钱款去向</button>
			</view>
	
		</view>
		
		<tui-keyboard :show="bottomModal" @close="closeKeyboard" @click="handleClick">
			<view style="height: 300rpx;">
				<view style="font-size:40rpx;text-align:center;margin-top:40rpx;">支付密码</view>
				<view v-if="orderData.status==1" style="font-size:40rpx;text-align:center;margin-top:40rpx;">￥{{orderData.finalPrice}}</view>
				<tui-keyboard-input :inputvalue="pwdArr"></tui-keyboard-input>
			</view>
		</tui-keyboard>
		
		<radio-group @change="changeRedio">
		<view class="cu-modal" :class="cardBox ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">
						选择支付方式
					</view>
				</view>
				
				<u-line></u-line>
				<view class="padding-xl bg-white" style="text-align: left;">
					<block v-for="(item,index) in bankcardList" :key="index">
						<view @click="changeCard(index)">
							<view style="display: flex;">
								<view style="margin-top: 5rpx;" class="bankIcon" :class="['icon-'+item.bankType]"></view>
								<text style="margin-left:6rpx;font-size: 32rpx;">{{bankTypeMap.get(item.bankType)}}{{item.bankCard==undefined?'':'('+item.bankCard+')'}}</text>
								<view style="margin-left: auto;margin-top: 0rpx;">
									<radio :value="index"  style="transform:scale(0.7)" :checked="index===radio" ></radio>
								</view>
							</view>
							
						</view>
						<u-line style="margin: 1rpx;"></u-line>
					</block>
					<view style="display: flex;" @click="toAddCard">
						<view>
							<u-icon style="" name="plus" ></u-icon>
							<text style="font-size: 32rpx;margin-left:10rpx;">添加银行卡</text>	
						</view>
					</view>
				</view>
				<u-line></u-line>
				
				<view class="cu-bar bg-white justify-end">
					
				</view>
			</view>
		</view>
		</radio-group>
	
	</view>
</template>

<script>
import {_bankTypeMap,_cardTypeMap} from '@/pages/data/bank.js'
	export default {
		data() {
			return {
				bankcardList:[],
				bankTypeMap:new Map([]),
				cardTypeMap:new Map([]),
				selectedPayWay:{
					bankType:'ZFB'
				},
				radio:0,
				cardBox:false,
				orderData:{},
				orderItems:[],
				orderShop:{},
				recMesShow:false,
				refMesShow:false,
				flag:0,
				pwdArr:["", "", "", "", "", ""],
				payPassword:["", "", "", "", "", ""],
				basicsList: [
					{cuIcon: 'cartfill',name: '待创建', name_s: '已创建'},
					{cuIcon: 'card',name: '待付款', name_s: '已付款'},
					{cuIcon: 'deliver_fill',name: '待发货', name_s: '已发货'},
					{cuIcon: 'presentfill',name: '待收货', name_s: '已收货'}, {cuIcon: 'formfill',name: '待评价', name_s: '已评价'}
				], 
				bottomModal: false, codeKey: [], btnKey: true,
			}
		},
		computed: {
			basics(){
				switch(this.orderData.status){
					case 0:return -1;break;
					case 1:return 0;break;
					case 2:return 1;break;
					case 3:return 2;break;
					case 4:return 4;break;
					
				}
				return -2
			}
		
		},
		onLoad(data) {
			this.orderData.id=data.id
			this.bankTypeMap=_bankTypeMap;
			this.cardTypeMap=_cardTypeMap;
			
			
		},
		onShow() {
			this.loadData()
		},
		
		onReady() {
			
			uni.pageScrollTo({
			    scrollTop: 0,
			    duration: 0
			});
		},
		methods: {
			afterCancel(){
				this.$u.api.afterCancel(this.orderData.id).then(res=>{
					this.$refs.uToast.show({
						title: '取消成功',
						duration:500,
						type: 'success'
					})
					this.loadData()
				})
			},
			toAfterDetail(){
				uni.navigateTo({
					url: "/pages/order/afterDetail?id="+this.orderData.id
				});
			},
			toAfterSale(){
				uni.navigateTo({
					url: "/pages/afterSaleType/afterSaleType?id="+this.orderData.id+"&amount="+this.orderData.finalPrice
				});
			},
			delOrder(){
				this.$u.api.deleteOrder(this.orderData.id).then(res=>{
					this.$refs.uToast.show({
						title: '删除成功',
							// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
						type: 'success', 
							// 如果不需要图标，请设置为false
						icon: false,
						duration:500,
						back:true,
					});
				})
			},
			receivingSure(){
				this.recMesShow=true
			},
			receiving(){
				this.$u.api.receivingOrder(
					this.orderData.id
				).then(res=>{
					this.$refs.uToast.show({
						title: '收货成功',
							// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
						type: 'success', 
							// 如果不需要图标，请设置为false
						icon: false,
						duration:500,
						back:false,
					});
					this.loadData()
				})
			},
			refundSure(){
				this.refMesShow=true
			},
			refund(){
				this.$u.api.refundOrder({
					orderId:this.orderData.id,
				}).then(res=>{
					this.$refs.uToast.show({
						title: '退款成功',
							// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
						type: 'success', 
							// 如果不需要图标，请设置为false
						icon: false,
						duration:500,
						back:false,
					});
					this.loadData()
				})
			},
			loadData(){
				this.$u.api.getBankCardList().then(res=>{
					this.bankcardList=res
					this.bankcardList.push({bankType:'ZFB'},{bankType:'WX'},{bankType:'OCM'})
					this.selectedPayWay=this.bankcardList[this.bankcardList.length-1]
				})
				this.$u.api.orderDetail({id:this.orderData.id}).then(res=>{
					this.orderData=res.order
					this.orderItems=res.items
					this.orderShop=res.shop
				})
			},
			showKeyBox(){
				this.bottomModal=true
			},
			closeKeyboard(){
				this.pwdArr=["", "", "", "", "", ""]
				this.payPassword=["", "", "", "", "", ""]
				this.flag=0
				this.bottomModal=false
			},
			paySubmit(){
				this.$u.api.payOrder({
					payPassword:this.payPassword.join(''),
					cardId:this.selectedPayWay.cardId,
					bankCard:this.selectedPayWay.bankCard,
					bankType:this.selectedPayWay.bankType,
					cardType:this.selectedPayWay.cardType,
					orderIds:[this.orderData.id]
				}).then(res=>{
					this.$refs.uToast.show({
						title: '支付成功',
							// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
						type: 'success', 
							// 如果不需要图标，请设置为false
						icon: false,
						duration:500
					});
					this.loadData()
					
				})
			},
			handleClick(v){
				if(v.index<9&&this.flag<6){
					this.pwdArr[this.flag]='●'
					this.payPassword[this.flag]=v.index+1
					this.flag+=1
					if(this.flag==6){
						if(this.orderData.status==1)
							this.paySubmit();
						
					}
					
				}else if(v.index==10&&this.flag<6){
					this.pwdArr[this.flag]='●'
					this.payPassword[this.flag]=0
					this.flag+=1
					if(this.flag==6){
						if(this.orderData.status==1)
							this.paySubmit();
						
					}
				}	
				if(v.index==9){
					this.closeKeyboard()
					return
				}
				if(v.index==11&&this.flag>0){
					this.payPassword[this.flag-1]=""
					this.pwdArr[this.flag-1]=""
					this.flag-=1
					return
				}
				
			},
			changeAddr(){
				if(this.orderData.status==1||this.orderData.status==2)
				this.$u.route({
					url: 'pages/address/index?orderId='+this.orderData.id
				})
			},	
			changeRedio(i){
			
				this.radio=Number(i.detail.value)
				this.selectedPayWay=this.bankcardList[this.radio]
				this.cardBox=false
			},
			toAddCard(){
				uni.navigateTo({
					url: "/pages/bankCard/addBankCard"
				});
			},
			showCardBox(){
				this.cardBox=true
			},
			closeCardBox(){
				this.cardBox=false
			},
			changeCard(i){
				this.radio=Number(i)
				this.selectedPayWay=this.bankcardList[this.radio]
				this.cardBox=false
			},
			nextTap() {
				this.basics = this.basics == this.basicsList.length - 1 ? 0 : this.basics + 1;
			},
			
			closeModalTap () {
				this.bottomModal = false;
			},
			codeKeyTap (index) {
				if(this.codeKey.length < 4) {
					this.codeKey.push(index);
				}
			},
			codeKeyDelTap() {
				this.codeKey.pop();
			},
			getCodeKey() {
				this.btnKey = false;
			},
			appraiseTap() {
				uni.navigateTo({
					url: "/pages/order/appraise"
				});
			}
		}
	}
</script>

<style lang="scss">
	@import "order-details.scss";
	.v-icon {
	      position: absolute;
	      width: 18rpx;
	      bottom: -6rpx;
	      left: 35rpx;
	  
	}
</style>
